<template>
    <div class="add">
        <!-- 页面导航 -->
        <van-nav-bar title="添加备忘录" />

        <!-- 平台 -->
        <van-field label="平台">
            <template #input>
                <van-radio-group v-model="form.platform" direction="horizontal">
                    <van-radio name="淘宝">淘宝</van-radio>
                    <van-radio name="京东">京东</van-radio>
                    <van-radio name="拼多多">拼多多</van-radio>
                </van-radio-group>
            </template>
        </van-field>

        <!-- 任务 -->
        <van-field label="任务" v-model="form.task" placeholder="如：拍台灯" />

        <!-- 本金 -->
        <van-row>
            <van-col span="14">
                <van-field
                    v-model="form.benjin"
                    center
                    clearable
                    label="本金"
                    placeholder="0"
                >
                    <template #button>
                        元
                    </template>
                </van-field>
            </van-col>

            <van-col span="10">
                <van-field name="checkbox" label="本金已返">
                    <template #input>
                        <van-checkbox
                            v-model="form.is_return_benjin"
                            shape="square"
                        />
                    </template>
                </van-field>
            </van-col>
        </van-row>

        <!-- 佣金 -->
        <van-row>
            <van-col span="14">
                <van-field
                    v-model="form.yongjin"
                    center
                    clearable
                    label="佣金"
                    placeholder="0"
                >
                    <template #button>
                        元
                    </template>
                </van-field>
            </van-col>

            <van-col span="10">
                <van-field name="checkbox" label="佣金已返">
                    <template #input>
                        <van-checkbox
                            v-model="form.is_return_yongjin"
                            shape="square"
                        />
                    </template>
                </van-field>
            </van-col>
        </van-row>

        <!-- 备注 -->
        <van-field
            v-model="form.mark"
            rows="1"
            autosize
            label="备注"
            type="textarea"
            placeholder="输入备注，没有可不写"
        />

        <!-- 提交按钮 -->
        <van-button block type="primary" @click="submit">提交</van-button>
    </div>
</template>

<script>
import { Notify, Toast } from 'vant';
export default {
    data() {
        return {
            form: {
                platform: '',
                task: '',
                benjin: '',
                is_return_benjin: false,
                yongjin: '',
                is_return_yongjin: false,
                mark: '',
            },
        };
    },
    methods: {
        async submit() {
            // this.form 是页面双向绑定的数据，也就是响应式数据，我们不能直接在提交
            const params = JSON.parse(JSON.stringify(this.form));

            // 把 true / fasle 改成 0 或 1 的形式
            params.is_return_benjin = params.is_return_benjin ? 1 : 0;
            params.is_return_yongjin = params.is_return_yongjin ? 1 : 0;

            // 判断金钱是不是数字
            if (isNaN(params.benjin)) {
                Notify({ type: 'warning', message: '金额必须是一个数字' });
                return;
            }

            const res = await this.$http.post('/memos', params);

            if (res.code !== 201) {
                return Toast.fail(res.message);
            }

            // 成功后，跳转到列表页面
            this.$router.push('/list');
        },
    },
};
</script>

<style lang="less" scoped>
.add {
    height: 100vh;
    background: #eee;

    .van-field,
    .van-button {
        margin-top: 10px;
    }
}
</style>
